<template xmlns="http://www.w3.org/1999/html">
  <div class="head">
    <Head></Head>
  </div>
  <div class="menu">
    <Menu></Menu>
  </div>
  <div class="body">
  <div class="wrapper">
    <p>上理食堂<br>日日三餐，慢慢生活</p>
  </div>
  <div class="newestAdvice">
    <p>热门推荐菜品</p>
    <div class="food">
      <el-row class="food">
        <el-col
            v-for="pic in picList"
            :key="pic.id"
            :span="6"
        >
          <el-card :body-style="{ padding: '0px' }" class="item" style="margin-right: 20px;">
            <img :src="pic.src"
                 class="image">
            <div style="padding: 14px">
              <span>{{ pic.res }}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
  </div>
</template>

<script >
import Head from "@/components/Head.vue";
import Menu from "@/components/Menu.vue";
import { ref } from 'vue'
import {requestIfValidToken} from "../web-api/login-regiser/login.js";
import {removeToken} from "../utils/auth.js";
import {
  KEY_AVATAR,
  KEY_NICKNAME,
  KEY_RESTAURANT_ID,
  KEY_ROLE,
  KEY_USER_ID, KEY_USER_NAME,
  setLocalStorage
} from "../utils/localStorge.js";
export default {
  name: 'home',
  // 局部引入自定义组件
  components: {
    Menu,
    Head
  },
  data() {
    return {
      picList: [
        {id:1, src :"src/assets/wife.jpg" , res:"面包房——老婆饼"},
        {id:2, src :"src/assets/duckrice.jpg" , res:"五食堂——烤鸭饭"},
        {id:3, src :"src/assets/xiaolongxia.jpg" , res:"思餐厅——小龙虾"}
      ],
    };
  },
  created() {
    requestIfValidToken().then(res=>{
      if(res.code!==200){
        setLocalStorage(KEY_NICKNAME, null);
        setLocalStorage(KEY_AVATAR, null);
        setLocalStorage(KEY_RESTAURANT_ID, null);
        setLocalStorage(KEY_ROLE, null);
        setLocalStorage(KEY_USER_ID, null);
        setLocalStorage(KEY_USER_NAME, null);
        removeToken();
      }
    }).catch(err=>{
      setLocalStorage(KEY_NICKNAME, null);
      setLocalStorage(KEY_AVATAR, null);
      setLocalStorage(KEY_RESTAURANT_ID, null);
      setLocalStorage(KEY_ROLE, null);
      setLocalStorage(KEY_USER_ID, null);
      setLocalStorage(KEY_USER_NAME, null);
      removeToken();
    })
  }
}
const currentDate = ref(new Date())//获取用户数据？？
</script>

<style scoped>
.head {
  width: 100%;
  height: 70px;
  background-color: #fff;
  z-index: 999;
}
.body {
  background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.2)),url('@/assets/indexpic.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.wrapper {
  width:100%;
  height:500px;
  justify-content: center;
  align-items: center;
}

.wrapper p {
  color: rgba(255, 255, 255, 0.90);
  font-size: 100px;
  font-weight: bold;
  padding-top: 80px;
  margin-left: 40px;
}
.newestAdvice{
  background-color: rgba(255, 255, 255, 0.90);
}

.newestAdvice p{
  font-size: 30px;
  padding-top: 10px;
  padding-left: 10px;
}

.food{
  margin-right: 50px;
  margin-left: 50px;
}
.food item{

}

.image {
  width: 100%;
  display: block;
}
</style>